<ion-toolbar
  *ngIf="progress$ | async as progress"
  color="light"
  [@heightCollapse]="animation"
>
  <ion-list class="list">
    <!-- show progress -->
    <ng-container *ngIf="progress.size !== null; else calculating">
      <ion-list-header>
        <ion-label>
          Downloading: {{ getProgress(progress.size, progress.downloaded) }}%
        </ion-label>
      </ion-list-header>
      <ion-progress-bar
        class="progress"
        color="secondary"
        [value]="getProgress(progress.size, progress.downloaded) / 100"
      ></ion-progress-bar>
    </ng-container>
    <!-- show calculating -->
    <ng-template #calculating>
      <ion-list-header>
        <ion-label>Calculating download size</ion-label>
      </ion-list-header>
      <ion-progress-bar
        class="progress"
        color="secondary"
        type="indeterminate"
      ></ion-progress-bar>
    </ng-template>
  </ion-list>
</ion-toolbar>
